<template>
	<view>
		<view class="box" v-for="(item,index) in list" :key="index" @click="goDesc(item.id)">
			<view class="header">
				<view><text class="greentag"></text>{{item.type_text}}</view>
				<view v-if="item.status==1">已回复</view>
				<view v-else>未回复</view>
			</view>
			<view class="content">{{item.desc}}</view>
			<view class="foot">{{item.createtime}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				limit:20,
				total:0,
				list:[]
			}
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.getList(1);
		},
		onReachBottom() {
			if(this.list.length<this.total){
				this.getList();
			}
		},
		methods: {
			getList(num){
				var _this = this;
				_this.$http('apply.myLiuyan',{
					page:num?num:_this.page,
					limit:_this.limit
				}).then(res=>{
					_this.list = _this.list.concat(res.data.list);
					_this.total = res.data.total;
					_this.page++;
				})
			},
			goDesc(id){
				uni.navigateTo({
					url:'/pages/user/liuyan_desc?id='+id
				})
			}
		}
	}
</script>

<style>
	.box{
	    border: 2rpx solid #e4e0e075;
	    box-shadow: 3rpx 3rpx 5rpx #e4e0e075;
		background-color: #fff;
		margin: 30rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
	}
	.greentag{
		background-color: green;
		width: 10rpx;
		display: inline-block;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.header{
		height:60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e1e1e1;
	}
	.content{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 10rpx 0;
		color: #565656;
	}
	.foot{
		font-size: 24rpx;
		color: #ccc;
	}
</style>
